<template>
  <div class="header-container">
    <div class="left">
      <img class="logo" src="@/assets/images/logo.png" alt="">
      <div class="til">电子招标系统</div>
    </div>
    <div class="url-list">
      <div :class="['item', { 'on': item.url === path }]" v-for="(item, index) in navList" :key="index" @click="navigateTo(item.url)">
        <img :src="item.url === path ? item.iconActivePath : item.iconPath" alt="">
        <div class="item-til">{{ item.name }}</div>
      </div>
    </div>
    <div class="auth">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <img src="@/assets/images/admin.png" alt="">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="edit">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="修改密码" :visible.sync="isShowPassword" class="pass-form" width="550px">
      <el-form :model="passForm" label-width="100px" >
        <el-form-item label="输入旧密码：" prop="passOld">
          <el-input type="password" v-model="passForm.passOld" placeholder="请输入旧密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="输入新密码：" prop="pass">
          <el-input type="password" v-model="passForm.pass" placeholder="密码大于6位，由数字与字母的组合" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：" prop="checkPass">
          <el-input type="password" v-model="passForm.checkPass" placeholder="密码大于6位，由数字与字母的组合" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowPassword = false">取 消</el-button>
        <el-button type="primary" @click="isShowPassword = false">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: '',
      navList: [
        {
          name: '招标过程监控',
          url: '/admin/monitoring',
          iconPath: require('@/assets/images/layers-normal.png'),
          iconActivePath: require('@/assets/images/layers-active.png')
        },
        {
          name: '项目列表',
          url: '/admin/project-list',
          iconPath: require('@/assets/images/xiangmu.png'),
          iconActivePath: require('@/assets/images/xiangmu-active.png')
        }
      ],
      isShowPassword: false,
      passForm: {
        passOld: '',
        pass: '',
        checkPass: '',
      },
    }
  },
  watch: {
    $route() {
      this.getCurrentPath()
    },
  },
  mounted() {
    this.getCurrentPath()
  },
  methods: {
    handleCommand(command) {
      if (command=='edit') {
        this.isShowPassword = true
      } else if (command == 'logout') {
        this.$confirm('确定退出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    navigateTo(path) {
      this.$router.push(path);
    },
    getCurrentPath() {
      this.path = this.$route.path
      console.log('路由', this.path)
    },
  }
}
</script>

<style lang="scss" scoped>
.header-container {
  height: 72px;
  width: 100vw;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 32px;

  .left {
    display: flex;
    align-items: center;

    .logo {
      width: 43px;
      margin-right: 14px;
    }
  }

  .url-list {
    margin-left: 100px;
    display: flex;
    align-items: center;

    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;

      &.on {
        background: #ECF2FE;
        border-radius: 4px;
        color: #006FE1;
      }

      img {
        width: 24px;
        margin-right: 5px;
      }
    }
  }

  .auth {
    margin-left: auto;

    img {
      width: 42px;
    }
  }
  .pass-form ::v-deep .el-dialog__body{
    border-top: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
  }
  .pass-form ::v-deep .el-dialog__footer{
    padding-top: 20px;
  }
  .el-form-item:last-of-type{
    margin-bottom: 0;
  }
}

@media (max-width:1512px) {
  .header-container {
    height: 54px;
  }
}
</style>